Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix for missing icon when sortable field in CollectionType #7453

Merged
merged 1 commit into from
Aug 27, 2021
Merged

Fix for missing icon when sortable field in CollectionType #7453

merged 1 commit into from
Aug 27, 2021

Conversation

willemverspyck
Copy link
Contributor

Subject

No icon is visible in the sortable field when using CollectionType:

$form
    ->add('blocks', CollectionType::class, [], [
        'edit' => 'inline',
        'inline' => 'table',
        'sortable' => 'position',
    ]);

I am targeting this branch, because this issue started in v4.

Changelog

### Fixed
Add Font Awesome icon instead of the jQuery UI icon

Before:
Before

After:
After

@VincentLanglet
Copy link
Member

Do you have a screenshot of the icon when it was working (in sonata 3) ?

Do you know why this icon is not found anymore ?

In the assets/js/app.js, there is

// Only using sortable widget from jQuery UI library
import 'jquery-ui/ui/widget';
import 'jquery-ui/ui/widgets/sortable';

And in the app.scss

// Only use sortable widget from jQuery UI library
@import "~jquery-ui/themes/base/sortable.css";

Did we miss an import ?

cc @jordisala1991

@VincentLanglet VincentLanglet requested review from jordisala1991 and a team August 26, 2021 10:07
@willemverspyck
Copy link
Contributor Author

willemverspyck commented Aug 26, 2021 •
edited
Loading

It looks like the icons came from: https://api.jqueryui.com/theming/icons/ which is part of jquery-ui.css. That library has been removed in this commit: a077dd9#diff-16a6bed0f143a48de9bd873cf9c67977ed8ffc4a6c58d0fc04d539e2ae353348, I think because only sortable.css (part of jquery-ui.css) was mandatory. By replacing this icon with Font Awesome, we don't need this library anymore. I don't see any other "ui-icon" CSS classes used anywhere.

It's not easy to switch back to v3, but in Sonata it looks exactly like the "After" screenshot. By having a quick look at Google images I found this screenshot: https://onest.by/sp_faq/sonata-admin-collectiontype-%d1%81%d0%be%d1%80%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b0/

@VincentLanglet
Copy link
Member

It looks like the icons came from: https://api.jqueryui.com/theming/icons/ which is part of jquery-ui.css. That library has been removed in this commit: a077dd9#diff-16a6bed0f143a48de9bd873cf9c67977ed8ffc4a6c58d0fc04d539e2ae353348, I think because only sortable.css (part of jquery-ui.css) was mandatory.

Yes, that why I was wondering if we missed some others imports.

By replacing this icon with Font Awesome, we don't need this library anymore. I don't see any other "ui-icon" CSS classes used anywhere.

Great.

It's not easy to switch back to v3, but in Sonata it looks exactly like the "After" screenshot. By having a quick look at Google images I found this screenshot: https://onest.by/sp_faq/sonata-admin-collectiontype-%d1%81%d0%be%d1%80%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b0/

Perfect.

@VincentLanglet VincentLanglet added this to the 4.0 milestone Aug 26, 2021
@VincentLanglet VincentLanglet requested a review from a team August 26, 2021 12:21
@VincentLanglet VincentLanglet merged commit 127b3c0 into sonata-project:4.x Aug 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@VincentLanglet VincentLanglet VincentLanglet approved these changes

@core23 core23 core23 approved these changes

@jordisala1991 jordisala1991 Awaiting requested review from jordisala1991

Assignees
No one assigned
Labels
patch
Projects
None yet
Milestone
4.0
Development

Successfully merging this pull request may close these issues.
3 participants
@willemverspyck @VincentLanglet @core23